import useCodeSelect from '@renderer/hooks/useCodeSelect'
import styles from './index.module.scss'

export default function Result() {
  const { data, id, selectItem } = useCodeSelect()
  // useEffect(() => {
  //   if (id !== -1) {
  //     document.getElementById(id.toString())?.scrollIntoView({
  //       behavior: 'smooth',
  //       block: 'center'
  //     })
  //   }
  // }, [id])
  //测试分支推送
  return (
    <>
      {data && data.length > 0 ? (
        <main
          className={`bg-slate-50 p-[15px] rounded-bl-lg rounded-br-lg -mt-[7px] max-h-[500px] overflow-auto ${styles.Result}`}
        >
          {data.map((item) => (
            <div
              onClick={() => selectItem(item.id)}
              className={`${id === item.id ? 'text-custom-black bg-custom-hui font-bold' : 'text-slate-700'} truncate px-2 py-1 rounded-lg cursor-pointer ${styles.resultItem} mb-[10px]`}
              key={item.id}
              id={`result-${item.id.toString()}`}
            >
              <div>{item.title}</div>
              <div className={'mt-2'}>{item.content}</div>
            </div>
          ))}
        </main>
      ) : null}
    </>
  )
}
